<template>
    <el-dialog v-model="props.msg.isShow" :title="props.msg.data.name" width="500">
        <el-form-item label="物品ID">
            {{ res.data.id }}
        </el-form-item>
        <el-form-item label="物品名字">
            <el-input v-model="res.data.name" />
        </el-form-item>
        <el-form-item label="入库日期">
            <el-col :span="11">
                <el-date-picker v-model="res.data.date" type="date" :disabled-date="disabledDate"
                    placeholder="Pick a date" style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-col>
        </el-form-item>
        <el-form-item label="设备型号">
            <el-input v-model="res.data.model" />
        </el-form-item>
        <el-form-item label="设备类型">
            <el-radio-group v-model="res.data.type">
                <el-radio-button label="相机" value="相机" />
                <el-radio-button label="雷达" value="雷达" />
                <el-radio-button label="陀螺仪" value="陀螺仪" />
                <el-radio-button label="其他" value="其他" />
            </el-radio-group>
            <el-input v-model="res.data.type" v-show="res.data.type == '其他'" />
        </el-form-item>
        <el-form-item label="设备数量">
            <el-input-number v-model="res.data.num" :min="1" :max="99" @change="handleChange" />
        </el-form-item>
        <el-form-item label="状态">
            <el-radio-group v-model="res.data.state">
                <el-radio value="未启用">未启用</el-radio>
                <el-radio value="已寄出">已寄出</el-radio>
                <el-radio value="使用中">使用中</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="res.desc" type="textarea" />
        </el-form-item>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="props.msg.valueChanged()">取消</el-button>
                <el-button type="primary" @click="SubmitEvent()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted} from 'vue'
interface msg {
    properties: any[],
    valueChanged:() => void
}
const props = withDefaults(
    defineProps<{
        msg: msg
    }>(),
    {
        msg: () => ({ properties: [], valueChanged: () => { } }),
    }
)
const SubmitEvent= () => {
    
    props.msg.valueChanged()
}
let res = ref()
onMounted(() => {
    console.log(props.msg)
    res.value = props.msg
})
</script>
<style  scoped>

</style>